<template>
	<view class="page">
		<mx-navbar>
			<template #left>
				<view class="cu-bar bg-white search" :style="{'margin-right': `${$jn_width}px`}">
					<view class="search-form round" @click.stop="$go('/pages/search/index')">
						<text class="cuIcon-search"></text>
						<text class="stxt">输入搜索的关键词</text>
					</view>
				</view>
			</template>
		</mx-navbar>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="vertical_nav_top"
				:style="`height:calc(100vh - ${$tools.navbar_height()}px)`">
				<view class="cu-item cl" :class="index == tab_cur ? 'cur' : ''" v-for="(item, index) in list"
					:key="index" @tap="TabSelect" :data-id="index">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation
				:style="`height:calc(100vh - ${$tools.navbar_height()}px)`" :scroll-into-view="'main-' + main_cur"
				@scroll="VerticalMain">
				<view class="main-box">
					<view class="mitem" v-for="(item, index) in list" :key="index" :id="'main-' + index">
						<view class="miitem" v-for="(sitem, sindex) in item.children" :key="sindex">
							<view class="mtitle"
								@click.stop="$go(`/pages/list/list?cate=${sitem.id}&name=${sitem.name}&first=2`)">
								<view class="mt">
									{{ sitem.name }}
								</view>
								<view class="mr mprice">
									<text class="mx">查看更多</text>
									<text class="cuIcon cuIcon-right "></text>
								</view>
							</view>
							<view class="grid bg-white  col-3 grid-box">
								<view class="ci" v-for="(ssitem, indexss) in sitem.children" :key="indexss"
									@click.stop="$go(`/pages/list/list?cate=${ssitem.id}&name=${ssitem.name}`)">
									<view class="ciimg-box">
										<image class="ciimg" :src="$imgUrl + ssitem.img" />
									</view>
									<text class="citxt">{{ ssitem.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const data = reactive({
	list: [],
	tab_cur: 0,
	main_cur: 0,
	vertical_nav_top: 0,
	load: true
})

const {
	list,
	tab_cur,
	main_cur,
	vertical_nav_top
} = toRefs(data)

onLoad(() => {
	getData()
})
async function getData() {
	let res = await proxy.$api('Cate')
	if (res.code == 0) {
		data.list = res.data || []
	}
}

function TabSelect(e) {
	data.tab_cur = e.currentTarget.dataset.id;
	data.main_cur = e.currentTarget.dataset.id;
	data.vertical_nav_top = (e.currentTarget.dataset.id - 1) * 50
}
function VerticalMain(e) {
	let tabHeight = 0;
	if (data.load) {
		for (let i = 0; i < data.list.length; i++) {
			let el = "#main-" + i
			let view = uni.createSelectorQuery().in(proxy).select(el);
			view.fields({
				size: true
			}, res => {
				data.list[i].top = tabHeight;
				tabHeight = tabHeight + res.height;
				data.list[i].bottom = tabHeight;
			}).exec();
		}
		data.load = false
	}
	let scrollTop = e.detail.scrollTop;
	for (let i = 0; i < data.list.length; i++) {
		if (scrollTop > data.list[i].top && scrollTop < data.list[i].bottom) {
			data.vertical_nav_top = (data.list[i].id - 1) * 50
			data.tab_cur = i
			return false
		}
	}


}


onShareAppMessage(() => { })
onShareTimeline(() => { })
</script>

<style lang="scss" scoped>
.search {
	width: 100%;
	// #ifdef MP
	margin-right: 180rpx;
	// #endif
}


.VerticalNav.nav {
	width: 200upx;
	white-space: initial;
	background-color: #fff;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	text-align: center;
	background-color: #fff;
	margin: 0;
	border: none;
	height: 50px;
	position: relative;
}

.VerticalNav.nav .cu-item.cur {
	background-color: $bg;
}

.VerticalNav.nav .cu-item.cur::after {
	content: "";
	width: 8upx;
	height: 30upx;
	border-radius: 10upx 0 0 10upx;
	position: absolute;
	background-color: $main_color;
	top: 0;
	right: 0upx;
	bottom: 0;
	margin: auto;
}

.VerticalBox {
	display: flex;
}

.VerticalMain {
	/* background-color: #f1f1f1; */
	flex: 1;
}

.cl {
	font-size: 24rpx;
}

.main-box {
	padding-bottom: 30rpx;
}
.miitem{
	margin-bottom: 30rpx;
}
.mitem {
	margin: 30rpx 20rpx 0;
	background-color: #fff;

	.mtitle {
		width: 100%;
		padding: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.mt {
			font-size: 24rpx;
			color: #000;
		}

		.mx {
			font-size: 20rpx;
		}

		.mr {
			color: #999;
			display: flex;
			align-items: center;

			.cuIcon {
				font-size: 22rpx;
			}
		}
	}

	.grid-box {
		padding-bottom: 30rpx;
	}

	.ci {
		margin-top: 16rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.ciimg-box {
			width: 140rpx;
			height: 140rpx;
			padding: 20rpx;

			.ciimg {
				width: 100%;
				height: 100%;
			}
		}

		.citxt {
			margin-top: 16rpx;
			font-size: 22rpx;
			color: #000;
		}
	}
}
</style>
